<template>
    <div class="account-detail-wrap">
        <el-form ref="formRef" :model="formData" :rules="rules">
            <el-form-item label="用户头像" prop="imageInfo">
                <pl-upload-avatar v-model="formData.imageInfo"></pl-upload-avatar>
            </el-form-item>
            <el-form-item label="用户账号" prop="account">
                <el-input v-model="formData.account" placeholder="请输入用户账号"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input type="password" v-model="formData.password" placeholder="请输入用户密码"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="sex">
                <el-select v-model="formData.sex">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户身份" prop="identity">
                <el-input v-model="formData.identity" placeholder="请输入用户身份"></el-input>
            </el-form-item>
            <el-form-item label="用户部门" prop="deptName">
                <el-input v-model="formData.deptName" placeholder="请输入用户部门"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="请输入用户邮箱"></el-input>
            </el-form-item>
        </el-form>
        <div class="button-groups">
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from "vue";
import { saveSystemSet } from "@/api/system.js"
import { systemStore } from "@/pinia/system"
import { ElMessage } from "element-plus";

const formRef = ref();
const store = systemStore();
const formData = reactive({
    imageInfo: {},
    account: "",
    password: "",
    name: "",
    sex: 1,
    identity: "",
    deptName: "",
    email: "",
})

const rules = reactive({
    imageInfo: [{ required: true, type: 'object', message: "请上传头像", trigger: "change" }],
    account: [{ required: true, message: "请输入账号", trigger: 'blur' }],
    password: [{ required: true, message: "请输入密码", trigger: 'blur' }],
    name: [{ required: true, message: "请输入姓名", trigger: 'blur' }],
    sex: [{ required: true, message: "请输选择性别", trigger: 'change' }],
    identity: [{ required: true, message: "请输入身份", trigger: 'blur' }],
    deptName: [{ required: true, message: "请输入部门", trigger: 'blur' }],
    email: [{ required: true, message: "请输入邮箱", trigger: 'blur' }],
})

const save = () => {
    formRef.value.validate(val => {
        if (val) {
            const data = { ...formData }
            saveSystemSet("/user/saveSystemConfig", data).then((res) => {
                if (res.data.status == 200) {
                    ElMessage.success(res.data.message)
                    store.getUserInfo("/user/getUserInfo")
                } else {
                    ElMessage.error(res.data.error)
                }
            })
        }
    })
}
onMounted(() => {
    Object.keys(formData).forEach(key => {
        formData[key] = store[key]
    })
})
</script>
<style lang='scss' scoped>
.account-detail-wrap {
    padding: 20px 0 0 40px;

    .el-form {
        width: 60%;
    }
}
</style>